<template>
	<view class="content">
		<view class="bg">
			<view class="ava">
				<u-avatar size="80" :src="info.avatar"></u-avatar>
			</view>
		</view>
		<view class="userInfo">
			<view class="card">
				<text>{{info.username}}</text>
			</view>
		</view>
		<view class="button">
			<u-button type="primary" text="退出登陆" @click="logout"></u-button>
		</view>
		<u-notify ref="uNotify"></u-notify>
		<tabbar currentTab='user' />
	</view>
</template>

<script>
	import tabbar from "@/components/tabbar/index"
	export default {
		components: {
			tabbar,
		},
		data() {
			return {
				info:{},
			}
		},
		mounted() {
			uni.getStorage({
				key: 'userInfo',
				success:  (res) =>{
					this.info = res.data
				}
			});
			
		},
		methods: {
			logout() {
				this.$api({
					url: '/auth/logout',
					method: 'get',
				}).then(res=>{
					const {code,message} = res
					if(code==200){
						uni.clearStorage();
						this.$refs.uNotify.primary(message)
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/login/index'
							})
						},1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.bg {
			background-image: url('../../static/bg.png');
			background-position: center center;
			background-size: cover;
			background-repeat: no-repeat;
			height: 560rpx;

			// position: sticky;
			.ava {
				position: absolute;
				top: 400rpx;
				left: 50%;
				margin-left: -80rpx;
			}


		}

		.userInfo {
			margin-top: -50rpx;
			padding: 0 30rpx 30rpx 30rpx;

			.card {
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100px;
				width: 100%;
				background-color: rgba(254, 217, 194, 0.7);
			}
		}

		.button {
			padding: 0 30rpx 30rpx 30rpx;
		}
	}
</style>
